<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			text-align: center;
		}
		canvas{
			background-color: lightgrey;
		}
	</style>
</head>
<body>
	<h2>canvas绘图</h2>
	<canvas id="c3" width="500" height="400"></canvas>
	<script>
		var c3 = document.getElementById('c3');
		var ctx = c3.getContext('2d');
		function openMouth(){
			ctx.beginPath();
			ctx.arc(250,200,100,45*Math.PI/180,315*Math.PI/180);
			ctx.lineTo(250,200);
			ctx.closePath()
			ctx.stroke()
			// 填充眼球
			ctx.beginPath();
			ctx.arc(250,150,25,0,2*Math.PI);
			ctx.fillStyle = "#38f";
			ctx.fill()
			// 填充眼神
			ctx.beginPath();
			ctx.arc(263,135,3,0,2*Math.PI);
			ctx.fillStyle="#fff";
			ctx.fill()
		}
		function closeMouth(){
			// 绘制最外层轮廓
			ctx.beginPath();
			ctx.arc(250,200,100,0,2*Math.PI);
			ctx.lineTo(250,200);
			ctx.stroke()
			// 填充眼球
			ctx.beginPath();
			ctx.arc(250,150,25,0,2*Math.PI);
			ctx.fillStyle = "#38f";
			ctx.fill()
			// 填充眼神
			ctx.beginPath();
			ctx.arc(263,135,3,0,2*Math.PI);
			ctx.fillStyle="#fff";
			ctx.fill()
		}
		// closeMouth();
		// openMouth()
		var index = 0;
		var timer= setInterval(function(){
			ctx.clearRect(0,0,500,400);
			index += 1;
			if(index%2==0){
				openMouth();
			}else{
				closeMouth();
			}
		},1000)
	</script>
</body>
</html>